import React from 'react';
import { Layout, Button, Card } from 'antd';
import { DashboardOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';

const { Header, Content } = Layout;

const NoRouterApp = () => {
  console.log('NoRouterApp组件开始渲染');
  
  const [currentPage, setCurrentPage] = React.useState('dashboard');
  
  React.useEffect(() => {
    console.log('NoRouterApp组件已挂载');
  }, []);
  
  const renderContent = () => {
    switch (currentPage) {
      case 'dashboard':
        return (
          <div style={{ padding: '24px' }}>
            <Card title="仪表板" style={{ marginBottom: '16px' }}>
              <p>欢迎来到管理后台！</p>
              <p>这是一个不使用React Router的简化版本，用于测试基本功能。</p>
            </Card>
            
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}>
              <Card title="用户统计" size="small">
                <p>总用户数: 1,234</p>
                <p>活跃用户: 856</p>
              </Card>
              
              <Card title="订单统计" size="small">
                <p>今日订单: 45</p>
                <p>总订单数: 2,678</p>
              </Card>
              
              <Card title="系统状态" size="small">
                <p>服务器状态: 正常</p>
                <p>数据库状态: 正常</p>
              </Card>
            </div>
          </div>
        );
      
      case 'users':
        return (
          <div style={{ padding: '24px' }}>
            <Card title="用户管理">
              <p>这里是用户管理页面</p>
              <p>功能包括：用户列表、添加用户、编辑用户等</p>
            </Card>
          </div>
        );
      
      case 'settings':
        return (
          <div style={{ padding: '24px' }}>
            <Card title="系统设置">
              <p>这里是系统设置页面</p>
              <p>功能包括：基本设置、安全设置、通知设置等</p>
            </Card>
          </div>
        );
      
      default:
        return (
          <div style={{ padding: '24px' }}>
            <Card title="页面未找到">
              <p>请选择一个有效的页面</p>
            </Card>
          </div>
        );
    }
  };
  
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        background: '#fff', 
        padding: '0 24px', 
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <h1 style={{ 
          margin: 0,
          color: '#1890ff',
          fontSize: '24px',
          fontWeight: 'bold'
        }}>
          管理后台 (无路由版本)
        </h1>
        
        <div>
          <Button 
            type={currentPage === 'dashboard' ? 'primary' : 'default'}
            icon={<DashboardOutlined />}
            onClick={() => {
              console.log('切换到仪表板');
              setCurrentPage('dashboard');
            }}
            style={{ marginRight: '8px' }}
          >
            仪表板
          </Button>
          
          <Button 
            type={currentPage === 'users' ? 'primary' : 'default'}
            icon={<UserOutlined />}
            onClick={() => {
              console.log('切换到用户管理');
              setCurrentPage('users');
            }}
            style={{ marginRight: '8px' }}
          >
            用户管理
          </Button>
          
          <Button 
            type={currentPage === 'settings' ? 'primary' : 'default'}
            icon={<SettingOutlined />}
            onClick={() => {
              console.log('切换到系统设置');
              setCurrentPage('settings');
            }}
          >
            系统设置
          </Button>
        </div>
      </Header>
      
      <Content style={{ background: '#f0f2f5' }}>
        {renderContent()}
      </Content>
      
      <div style={{
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        background: 'rgba(0,0,0,0.8)',
        color: 'white',
        padding: '10px 15px',
        borderRadius: '6px',
        fontSize: '12px'
      }}>
        当前页面: {currentPage} | React + Ant Design 正常工作
      </div>
    </Layout>
  );
};

export default NoRouterApp;